<template>
  <div class="containers">
    <div class="container">
      <el-tabs>
        <el-tab-pane label="视频/介绍">
          <el-form ref="form" :model="form" label-width="70px">
             <el-form-item label="展示视频">
				<div style="color:red;">比例:700/400</div>
            <el-upload :action="upload + '/'" :show-file-list="false" :data="upimg" :on-success="handleAvatarSuccesss"
              :before-upload="beforeuploads">
              <video v-if="videoUrl" :src="videoUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
            <el-form-item label="介绍">
              <my-editor @getContent="getContent" :content="form.details" ref="editor"></my-editor>
            </el-form-item>
          </el-form>
          <div>
            <span slot="footer" class="dialog-footer">
              <!-- <el-button @click="cancel">取 消</el-button> -->
              <el-button type="primary" @click="saveEdit">保存</el-button>
            </span>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import MyEditor from '@/components/MyEditor.vue'
export default {
  name: 'basetable',
  components: {
    MyEditor
  },
  data() {
    return {
      form: {
        details: '',
         video: 0
      },
      url:'',
        videoUrl: '',
     upimg: {
        token: '',
        key: new Date().valueOf()
      },
      upload:''
    };
  },
  created() {
        this.getToken().then(res => {
            this.upimg.token = res.data.token
            this.url = res.data.url
            this.upload = res.data.upload
            },
      function () {
        console.log('请求失败处理');
      }
    )
    this.getData()
  },
  methods: {
    getContent(e) {
      this.form.details = e
    },
      // 上传视频
    handleAvatarSuccesss(res, file) {
      this.form.video = this.url + res.key;
      this.videoUrl = URL.createObjectURL(file.raw);
    },
    beforeuploads(file) {
      if (file) {
        if (file.type !== 'video/mp4') {
          this.$message.error('请上传视频格式');
          return false;
        }
        if (file.size / 1024 > 10240) {
          this.$message.error('上传视频大小不能超过 10240k!');
          return false;
        }
      }
      let types = file.name.split('.')//获取视频格式
      this.upimg.key = this.$name + '/home/' + new Date().valueOf() + '.' + types[types.length - 1];
    },
    //获取数据
    getData() {
      this.request('admin/indexSet/', 'get').then(res => {
        console.log(res)
        if(res.data){
             this.form=res.data
             this.videoUrl = res.data.video
        }
      })
    },
    // 编辑
    handleEdit(e) {
      this.editVisible = true;
      this.form = e;

      this.type = 1
    },
    cancel() {
      this.editVisible = false;
      this.form = {
        details: '',
      }
      this.$refs.editor.html = '';
      this.getData();
    },

    
   
    

    // 添加/修改
    saveEdit() {
      this.request('admin/indexSet/', 'POST', this.form).then(res => {
        this.getData()
        if (res.errno == 0) {
          this.$message.success(res.errmsg);
          // this.form = {
          //   agreement: '',
          //   code: 0
          // };
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },

  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.el-upload--text {
  width: 200px !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;

  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  /* width: 100px; */
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 178px;
  display: block;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 60px;
  height: 60px;

  .el-image img {
    object-fit: cover;
  }
}

/* 设置分页按钮样式 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
